<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
	
	<ui:define name="head">
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	</ui:define>

	<ui:define name="content">

		<h1 class="title ui-widget-header ui-corner-all">GMap - Events</h1>
		<div class="entry">
			<p>Map can respond to various events such as click, zoom change and overlay select.</p>
			
			<h:form>
				
				<p:growl id="messages" showDetail="true" life="2000" />
			
				<p:gmap center="41.381542, 2.122893" zoom="15" type="ROADMAP" style="width:600px;height:400px">

                    <p:ajax event="stateChange" listener="#{mapBean.onStateChange}" update="messages" />
                    <p:ajax event="pointSelect" listener="#{mapBean.onPointSelect}" update="messages" />

                </p:gmap>
				
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="gmapEvents.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:growl id="messages" showDetail="true" life="2000" /&gt;

    &lt;p:gmap center="41.381542, 2.122893" zoom="15" type="ROADMAP" style="width:600px;height:400px"&gt;

        &lt;p:ajax event="stateChange" listener="\#{mapBean.onStateChange}" update="messages" /&gt;
        &lt;p:ajax event="pointSelect" listener="\#{mapBean.onPointSelect}" update="messages" /&gt;

    &lt;/p:gmap&gt;

&lt;/h:form&gt;
					</pre>
				</p:tab>
				
				<p:tab title="MapBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.event.map.PointSelectEvent;
import org.primefaces.event.map.StateChangeEvent;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.LatLngBounds;

public class MapBean implements Serializable {
	
	public void onStateChange(StateChangeEvent event) {
		LatLngBounds bounds = event.getBounds();
		int zoomLevel = event.getZoomLevel();
		
		addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Zoom Level", String.valueOf(zoomLevel)));
		addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Center", event.getCenter().toString()));
		addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "NorthEast", bounds.getNorthEast().toString()));
		addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "SouthWest", bounds.getSouthWest().toString()));
	}
	
	public void onPointSelect(PointSelectEvent event) {
		LatLng latlng = event.getLatLng();
		
		addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Point Selected", "Lat:" + latlng.getLat() + ", Lng:" + latlng.getLng()));
	}
	
	public void addMessage(FacesMessage message) {
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}
					</pre>
				</p:tab>
			</p:tabView>
												
		</div>
	</ui:define>
</ui:composition>